import { Form, Input, Button, message } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import "../login/login.css";
import { getMenu } from "../../api/index";
import React from "react";
import  {useNavigate,Navigate} from "react-router-dom";
const Login = () => {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate=useNavigate()
  //登录过了(有token)
  if(localStorage.getItem('token')){
    return <Navigate to='/home' replace></Navigate>
  }
  const handleSubmit = (val) => {
    // console.log('val',val)//val就是用户名和密码，应该是组件中onFinish自动传过来的
    if (!val.password || !val.username) {
      messageApi.open({
        type: "warning",
        content: "请输入用户名或密码",
      });
    } else {
      getMenu(val).then(({ data }) => {//把data从成功的Promise中解构出来
        localStorage.setItem("token", data.data.token);
        navigate('/home')
      });
    }
  };
  return (
    <Form className="login-container" onFinish={handleSubmit}>
      {contextHolder}
      <div className="login_title ">系统登录</div>
      <Form.Item label="账号" name="username">
        <Input placeholder="请输入账号"></Input>
      </Form.Item>
      <Form.Item label="密码" name="password">
        <Input.Password
          placeholder="请输入密码"
          iconRender={(visible) =>
            visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
          }
        />
      </Form.Item>
      <Form.Item className="login-button">
        <Button type="primary" htmlType="submit">
          登录
        </Button>
      </Form.Item>
    </Form>
   
  );
};

export default Login;
